<template>
  <div>
    <div class="list" :style="'height:'+height">
      <table >
        <tr>
          <th v-for="(item, index) in th" :key="index">{{ item }}</th>
          <slot name="th"></slot>
        </tr>

          <slot></slot>
      
      </table>
    </div>


    <!-- <div class="tap">
      <div class="msg">
        <p>1条记录中1-1条</p>
        <div class="pre" @click="reduce">&lt;</div>
        <div class="number">{{ tapnumber }}</div>
        <div class="next" @click="add">&gt;</div>
        <select name="" id="">
          <option value="">10条/页</option>
        </select>
      </div>
    </div> -->
  </div>
</template>

<script >
export default {
  props: [ "th","height"],
  data() {
    return {
      tapnumber: 1,
      isShow: true,
    };
  },
  methods: {
    reduce() {
      if (this.tapnumber == 0) return;
      this.tapnumber--;
    },
    add() {
      this.tapnumber++;
    },
  },
  mounted() {},
};
</script>

<style scoped lang='less'>
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  tr {
    td,
    th {
      border: 1px solid #ebeef5;
      height: 50px;
    }
    th{
     color: #9093b3;
    }
  }
}
.list{
    overflow-y: auto;
  overflow:none;
}
.tap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  .msg {
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    select {
      width: 100px;
    }
    .pre,
    .next,
    .number {
      width: 20px;
      height: 20px;
      border: 1px solid #f7f7f7;
    }
    .pre,
    .next {
      cursor: pointer;
    }
    .number {
      border: 1px solid #95caed;
    }
  }
}
.list{
  height:210px;
}
/*修改某个div的滚动条样式*/
.list::-webkit-scrollbar{
  width:0px;
  height:0px;
  /**/
}

</style>